Door DocuGenerate Het automatiseren van documentgeneratie kan uw productiviteit aanzienlijk verhogen, vooral bij het beheren van meerdere sjablonen en datasets. Hoewel de webapp van DocuGenerate een uitgebreide oplossing biedt, wilt u mogelijk documentgeneratiemogelijkheden integreren in uw eigen Bubble-applicatie.
Daarom hebben we een Bubble-plugin gemaakt waarmee u de kracht van de API van DocuGenerate rechtstreeks binnen uw Bubble-apps kunt benutten. In deze tutorial laten we zien hoe we een vereenvoudigde versie van DocuGenerate hebben gebouwd met Bubble en onze plugin - zonder te programmeren!
Om een beter beeld te krijgen van wat we gaan bouwen, kunt u de Bubble demo-app bekijken. De onderstaande animatie toont een volledig gebruikerstraject door de applicatie, van sjabloonaanmaak tot documentgeneratie en download.
Het typische gebruikerstraject volgt deze stappen:
Deze workflow weerspiegelt de kernfunctionaliteit van de webapp van DocuGenerate, maar is volledig geïmplementeerd binnen Bubble. De naadloze integratie tussen het visuele ontwikkelplatform van Bubble en de API van DocuGenerate creëert een krachtige maar toegankelijke oplossing voor documentgeneratie.
Voordat we onze app gaan bouwen, moet u uw ontwikkelomgeving voorbereiden. Het visuele platform van Bubble maakt dit proces eenvoudig, maar er zijn een paar essentiële stappen om te voltooien:
De DocuGenerate Bubble-plugin biedt een uitgebreide set API-aanroepen die de functionaliteit van onze REST API weerspiegelen. Deze zijn onderverdeeld in twee types:
Deze worden gebruikt om informatie op te halen uit uw DocuGenerate-account:
Deze worden gebruikt om bronnen te maken, wijzigen, of verwijderen in uw DocuGenerate-account:
Het begrijpen van deze API-aanroepen is essentieel, aangezien ze de ruggengraat vormen van onze demo-applicatie. Gedurende deze tutorial gebruiken we de meeste van deze aanroepen om een volledig functionele documentgeneratieworkflow te maken.
Voordat we in elke pagina duiken, stellen we eerst de navigatiestructuur in die alle delen van onze applicatie met elkaar verbindt. Een consistent navigatiesysteem is cruciaal voor een soepele gebruikerservaring in de hele app. We hebben een eenvoudige navigatiebalk gemaakt die bovenaan elke pagina verschijnt, met daarin:
Deze navigatiestructuur weerspiegelt de aanpak die wordt gebruikt in de daadwerkelijke webapp van DocuGenerate, wat een vertrouwde ervaring biedt voor gebruikers die ons hoofdplatform al hebben gebruikt. De vertrouwde lay-out helpt gebruikers intuïtief te begrijpen hoe ze door de applicatie moeten navigeren, zonder dat er extra instructies nodig zijn.
De dashboardpagina dient als het centrale knooppunt van onze applicatie, en biedt gebruikers een direct overzicht van al hun beschikbare sjablonen. Dit is het eerste scherm dat gebruikers zien wanneer ze de app openen, dus is het ontworpen om zowel informatief als intuïtief te zijn, met snelle toegang tot de belangrijkste functionaliteit.
Net als bij de webinterface van DocuGenerate hebben we sjablonen georganiseerd in een visueel aantrekkelijke rasterlay-out die sjabloonvoorbeelden samen met hun namen toont. Deze visuele aanpak maakt het voor gebruikers eenvoudig om snel het sjabloon te vinden dat ze zoeken, zelfs bij het beheren van tientallen verschillende sjablonen.
Het belangrijkste onderdeel hier is de RepeatingGroup, die automatisch wordt gevuld met alle sjablonen uit uw DocuGenerate-account. Deze dynamische aanpak zorgt ervoor dat het dashboard altijd de meest actuele lijst met sjablonen toont, zonder dat handmatige updates nodig zijn.
Elk sjabloon in het raster is aanklikbaar en navigeert naar een gedetailleerde weergave van dat specifieke sjabloon. Dit interactiepatroon creëert een natuurlijke doorstroming door de applicatie, en leidt gebruikers met één klik van het overzicht naar meer gedetailleerde informatie.
Het dashboard integreert ook naadloos met onze navigatiebalk, die de knop “New Template” bevat voor snelle toegang tot sjabloon maken. Dit zorgt ervoor dat gebruikers vanaf deze centrale locatie eenvoudig het documentgeneratieproces kunnen starten.
Op deze pagina beginnen gebruikers het documentgeneratieproces door een Word-document te uploaden dat als sjabloon dient. Deze cruciale stap legt de basis voor alle volgende documentgeneratie, aangezien het geüploade sjabloon de structuur, opmaak, en merge-tags bevat die worden gebruikt bij het genereren van documenten.
We hebben deze pagina eenvoudig en gericht ontworpen, waarbij onnodige afleidingen zijn weggelaten en gebruikers door het sjabloonaanmaakproces worden geleid. De interface communiceert duidelijk wat vereist is (een Word-document en een naam) en biedt directe feedback wanneer het sjabloon succesvol is gemaakt.
file, met behulp van de optie voor dynamische koppelingname 
Dit gestroomlijnde formulier verzorgt alles wat nodig is om een sjabloon te maken in DocuGenerate. Het FileUploader-component biedt een native manier voor gebruikers om bestanden van hun apparaat te selecteren, compleet met ondersteuning voor slepen en neerzetten en duidelijke visuele feedback. Dit maakt het proces intuïtief, zelfs voor niet-technische gebruikers die mogelijk niet bekend zijn met documentautomatisering.
Nadat het sjabloon is gemaakt, creëert de automatische navigatie naar de pagina met sjabloondetails een naadloze overgang naar de volgende stap in de workflow. Dit doordachte gebruikerstraject elimineert de noodzaak voor gebruikers om handmatig tussen pagina’s te navigeren, wat wrijving vermindert en de algehele ervaring verbetert.
De pagina met sjabloondetails dient als het centrale knooppunt voor het beheren van een specifiek sjabloon en alle documenten die daarmee zijn gegenereerd. Deze pagina combineert essentiële sjabloongegevens met mogelijkheden voor documentbeheer, en biedt een uitgebreid overzicht van het gebruik en de uitvoer van elk sjabloon.
In tegenstelling tot de eenvoudigere pagina’s die we tot nu toe hebben gemaakt, integreert de pagina met sjabloondetails meerdere gegevensbronnen en interactieve elementen om een complexere en functionelere interface te creëren. We hebben deze elementen zorgvuldig georganiseerd om duidelijkheid te behouden ondanks de toegenomen complexiteit, zodat gebruikers de functies die ze nodig hebben eenvoudig kunnen vinden en gebruiken.
id ingesteld op de template_id uit de URL. 
template_iddocument_uri om te downloaden 
Het krachtigste aspect van deze pagina is hoe deze de gegevensbron van het Group-element gebruikt om alle sjabloondata beschikbaar te maken voor onderliggende elementen. Dit patroon, in Bubble soms “data-overerving” genoemd, zorgt ervoor dat alle elementen op de pagina automatisch worden bijgewerkt wanneer een ander sjabloon wordt geselecteerd. Deze aanpak vereenvoudigt de logica van de pagina en verbetert de prestaties door overbodige API-aanroepen te verminderen.
De documentenlijst biedt een chronologisch overzicht van alle documenten die op basis van dit sjabloon zijn gegenereerd, met de meest recente documenten bovenaan. Elke documentvermelding bevat een directe downloadlink, zodat gebruikers snel toegang hebben tot hun gegenereerde bestanden zonder naar extra pagina’s te navigeren.
De prominente “+”-knop dient als een duidelijke call-to-action, die gebruikers naar het documentgeneratieproces leidt. Bij aanklikken navigeert deze knop naar de pagina voor documentgeneratie, waarbij de sjabloon-ID wordt meegegeven om de context te behouden. Dit doordachte interactieontwerp zorgt ervoor dat gebruikers eenvoudig kunnen wisselen tussen het bekijken van sjabloondetails en het genereren van nieuwe documenten.
Hier komt de echte kracht van documentgeneratie tot leven, waardoor gebruikers hun data kunnen koppelen aan sjablonen om aangepaste documenten te maken. We hebben deze pagina krachtig maar toegankelijk ontworpen, met een balans tussen geavanceerde functionaliteit en een duidelijke interface.
Deze pagina behoudt visuele consistentie met de pagina met sjabloondetails, en toont dezelfde sjabloongegevens bovenaan om context te bieden. Dit helpt gebruikers te bevestigen dat ze met het juiste sjabloon werken voordat ze verdergaan met documentgeneratie, wat mogelijke fouten of verwarring voorkomt.
template_id uit de URL 
Het MultiLine Input-veld is bijzonder belangrijk, omdat het een flexibele manier biedt voor gebruikers om hun JSON-data in te voeren. Deze aanpak ondersteunt zowel eenvoudige datastructuren voor basisdocumenten als complexe geneste objecten of arrays voor meer geavanceerde generatiescenario’s. Voor gevorderde gebruikers biedt deze directe JSON-bewerkingsmogelijkheid nauwkeurige controle over de data die in hun sjablonen wordt samengevoegd.
De vervolgkeuzelijst voor het uitvoerformaat toont een van de belangrijkste voordelen van DocuGenerate: de mogelijkheid om documenten in meerdere formaten te genereren vanuit één sjabloon. Gebruikers kunnen het formaat kiezen dat het beste bij hun behoeften past, of het nu een PDF is voor formele distributie, een DOCX voor verdere bewerking, of een ander formaat voor specifieke gebruiksgevallen.
Nadat het document is gegenereerd, navigeert de pagina automatisch terug naar de pagina met sjabloondetails, waar het nieuw gemaakte document bovenaan de lijst verschijnt. Deze directe feedback bevestigt dat de generatie succesvol was en biedt snelle toegang tot het gegenereerde document.
Hoewel onze demo-app de essentiële functionaliteit voor documentgeneratie biedt, zijn er veel manieren waarop deze kan worden verbeterd om een nog krachtigere en gebruiksvriendelijkere applicatie te creëren:
Deze verbeteringen zouden onze demo-app transformeren van een proof of concept naar een volwaardige oplossing voor documentgeneratie, afgestemd op specifieke zakelijke behoeften. Het mooie van het gebruik van het visuele ontwikkelplatform van Bubble is dat deze functies geleidelijk kunnen worden toegevoegd, waardoor de applicatie kan meegroeien met de behoeften van gebruikers.
Het bouwen van een documentgeneratie-app met Bubble en de DocuGenerate-plugin toont de kracht van no-code ontwikkeling in combinatie met gespecialiseerde API’s. De demo-app die we hebben gebouwd dient zowel als proof of concept als startpunt voor uw eigen documentautomatiseringsprojecten. Door gebruik te maken van het visuele ontwikkelplatform van Bubble en de documentgeneratiemogelijkheden van DocuGenerate, kunt u aangepaste oplossingen creëren die zijn afgestemd op uw specifieke behoeften, zonder één regel code te schrijven.
Deze aanpak is bijzonder waardevol voor bedrijven zonder toegewijde ontwikkelteams, of bedrijven die snel willen prototypen en itereren op documentgeneratieworkflows. De visuele aard van Bubble maakt het toegankelijk voor business analisten, operations specialisten, en andere niet-technische teamleden, waardoor zij oplossingen kunnen creëren die rechtstreeks hun documentautomatiseringsuitdagingen aanpakken.
Of u nu interne tools voor uw team bouwt of klantgerichte applicaties, deze aanpak biedt een snelle en flexibele manier om documentgeneratiefunctionaliteit te implementeren. De combinatie van de intuïtieve interface van Bubble en de krachtige API van DocuGenerate creëert een synergie die geavanceerde documentautomatisering binnen bereik brengt van organisaties van elke omvang.
Voer uw e-mailadres in om de nieuwste nieuwsbrief van DocuGenerate te ontvangen
Leer hoe u conforme hybride Factur-X PDF-facturen maakt met ingesloten XML-bestanden. Ontdek de vereisten, standaarden, en implementatiemethoden voor ZUGFeRD, Factur-X, en andere e-facturatieformaten die in heel Europa en wereldwijd worden gebruikt.
Transformeer uw juridische praktijk met geautomatiseerde generatie van processtukken. Leer hoe u een efficiënte workflow bouwt met Make, Typeform, en DocuGenerate die intakedata van cliënten omzet in correct opgemaakte processtukken die voldoen aan professionele standaarden.
DocuGenerate is er trots op winnaar te zijn van de Top Performer-award in de categorie PDF Generators van SourceForge, de grootste website voor softwarebeoordelingen en -vergelijkingen ter wereld. We voelen ons vereerd dat onze klanten ons waarderen en dat we deze award ontvangen.